<template>
  <div class="wx-wrap">
    <h2>已授权绑定账号</h2>
    <div class="user-info-wrap">
      <el-avatar
        :src="userInfo?.avatar"
        size="large"
      />
      <div>{{ userInfo?.nickname }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { bindWxMp } from "@/api/system/userauth";
import { useRoute } from "vue-router";

const userInfo = ref();

onMounted(() => {
  console.log("onBeforeMount");
  const query = useRoute().query;
  bindWxMp(query).then(res => {
    if (res.data) {
      userInfo.value = res.data.userInfo;
    }
    console.log(res.data.userInfo);
  });
});
</script>

<style scoped lang="scss">
.wx-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.user-info-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
</style>
